<template>
  <div class="corver">
    <xr-header
        icon-class="wk wk-project"
        icon-color="#4AB8B8"
        placeholder="请输入项目/任务/描述"
        label="项目"
        show-search
        ft-top="0"
        @search="searchClick">
      <template v-slot:ft>
        <div v-if="permissonProject">
          <el-button
              type="primary"
              icon="el-icon-plus"
              class="xr-btn--orange"
              @click="createProjectClick">
            创建项目
          </el-button>
        </div>
      </template>
    </xr-header>
    <div v-loading="loading" class="content">
      <span class="dropdown-handle">
        <el-dropdown trigger="click" @command="showTypeChange">
          <div class="el-dropdown-link">
            {{ tabShowType | showTypeName }}<i class="el-icon-arrow-down el-icon--right"/>
          </div>
          <template v-slot:dropdown>
            <el-dropdown-menu>
            <el-dropdown-item command="board">卡片视图</el-dropdown-item>
            <el-dropdown-item command="list">列表视图</el-dropdown-item>
          </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-dropdown
            trigger="click"
            @command="filterClick">
          <div class="el-dropdown-link el-dropdown-filter">
            {{ filterObj[filterValue] }}<i class="el-icon-arrow-down el-icon--right"/>
          </div>
          <template v-slot:dropdown>
            <el-dropdown-menu>
            <div class="el-dropdown-title">排序</div>
            <el-dropdown-item v-for="(item, index) in filterList" :key="index"
                              :command="item.value">{{ item.label }}</el-dropdown-item>
          </el-dropdown-menu>
          </template>
        </el-dropdown>
      </span>
      <el-tabs v-model="tabName">
        <el-tab-pane
            v-for="(item, index) in tabList"
            :key="index"
            :label="item.label"
            :name="item.name">
          <draggable
              v-model="item.list"
              :options="{ forceFallback: false, disabled: tabName == 'star' }"
              class="cover-content"
              @end="moveItem">
            <template v-if="tabShowType == 'board'">
              <div
                  v-for="(childItem, childIndex) in item.list"
                  :key="childIndex"
                  class="cover-content-item"
                  @click="enterDetail(childItem)">

                <div v-src:background-image="childItem.coverUrl || defaultCorverUrl"
                     class="cover-content-item__content">
                  <div class="handle-bar">
                    <div :title="childItem.name" class="title text-one-line">{{ childItem.name }}</div>
                    <i
                        v-if="childItem.authList && childItem.authList.project && childItem.authList.project.setWork"
                        class="wk wk-circle-edit"
                        @click.stop="editProjectClick(childItem)"/>
                    <i
                        :class="{ 'is-collect': childItem.collect == 1 }"
                        class="wk wk-focus-on"
                        @click.stop="collectClick(childItem)"/>
                  </div>
                  <div class="cover-content-item__content-shadow"/>
                </div>
              </div>
              <div
                  v-if="permissonProject"
                  class="cover-content-item content-cross"
                  @click="createProjectClick">
                <div class="content-cross__content">
                  <flexbox justify="center" align="center" orient="vertical">
                    <i class="wk wk-l-plus"/>
                    <div>创建项目</div>
                  </flexbox>
                </div>
              </div>
            </template>
            <template v-else>
              <project-cell
                  v-for="(childItem, childIndex) in item.list"
                  :key="childIndex"
                  :data="childItem"
                  :edit-show="childItem.authList && childItem.authList.project && childItem.authList.project.setWork"
                  :delete-show="childItem.authList && childItem.authList.project && childItem.authList.project.setWork"
                  @click="enterDetail(childItem)"
                  @handle="cellHandle($event, childItem)"
              />
              <project-cell
                  v-if="permissonProject"
                  :edit-show="false"
                  :delete-show="false"
                  :collect-show="false"
                  @click="createProjectClick">
                <template v-slot:header>
                  <div class="project-cell__add">
                    <i class="wk wk-l-plus"/>
                  </div>
                </template>

                <template v-slot:body>
                  <span class="project-cell__add--title">创建新项目</span>
                </template>
              </project-cell>
            </template>
          </draggable>
        </el-tab-pane>
      </el-tabs>
    </div>
    <add-project
        v-if="isCreate"
        :id="editId"
        @save-success="createSuccess"
        @close="isCreate = false"/>
  </div>
</template>

<script>
import {workIndexWorkListAPI} from '/src/api/pm/task'
import {
  workWorkCollectAPI,
  workUpdateWorkOrderAPI,
  workWorkDeleteAPI
} from '/src/api/pm/project'

import XrHeader from '/src/components/XrHeader'
import AddProject from '../components/AddProject'
import ProjectCell from './components/ProjectCell'

import Draggable from 'vuedraggable'
import {useErpUserStore} from "../../../store/modules/usererp.js";
import {mapState} from "pinia";

export default {
  // 项目封面展示
  name: 'Corver',
  components: {
    XrHeader,
    AddProject,
    Draggable,
    ProjectCell
  },
  filters: {
    showTypeName(value) {
      return {
        board: '卡片视图',
        list: '列表视图'
      }[value]
    }
  },
  props: {},
  data() {
    return {
      loading: true,
      tabShowType: 'board',
      search: '',
      filterObj: {},
      filterValue: 1,
      filterList: [{
        label: '按最早创建',
        value: 1
      }, {
        label: '按最近创建',
        value: 2
      }, {
        label: '按最近更新',
        value: 3
      }],
      isCreate: false,
      list: [],
      defaultCorverUrl: 'https://file.72crm.com/static/pc/images/pm/project-cover-1.jpg',
      tabName: 'all',
      tabList: [
        {
          label: '全部项目',
          name: 'all',
          list: []
        },
        {
          label: '我关注的',
          name: 'star',
          list: []
        }
      ],
      editId: null
    }
  },
  computed: {
    // ...mapGetters(['project']),
    ...mapState(useErpUserStore, ['project']),
    permissonProject() {
      return (
          this.project &&
          this.project.projectManage &&
          this.project.projectManage.save
      )
    }
  },
  watch: {},
  created() {
    this.filterList.forEach(item => {
      this.filterObj[item.value] = item.label
    })

    if (this.$route.query.type) {
      this.tabShowType = this.$route.query.type != 'board' ? 'list' : 'board'
    }
    this.getList()
    this.$bus.on('add-project', () => {
      this.getList()
    })
  },
  beforeRouteUpdate(to, from, next) {
    if (to.query.type) {
      this.tabShowType = to.query.type != 'board' ? 'list' : 'board'
    }
    next()
  },
  beforeDestroy() {
    this.$bus.off('add-project')
  },
  methods: {
    /**
     * 搜索操作
     */
    searchClick(search) {
      this.search = search
      this.getList()
      this.$router.push(`/project/search?search=${search || ''}&sort=${this.filterValue}`)
    },

    /**
     * 筛选操作
     */
    filterClick(command) {
      this.filterValue = command
      this.getList()
    },

    /**
     * 获取列表
     */
    getList() {
      this.loading = true
      workIndexWorkListAPI({
        workSort: this.filterValue,
        name: this.search
      })
          .then(res => {
            this.loading = false
            this.list = res.data || []
            const allItem = this.tabList[0]
            allItem.list = res.data || []
            allItem.label = `全部项目（${allItem.list.length}）`

            const starItem = this.tabList[1]
            starItem.list = this.list.filter(item => {
              return item.collect == 1
            })
            starItem.label = `我关注的（${starItem.list.length}）`
          })
          .catch(() => {
            this.loading = false
          })
    },

    /**
     * 收藏
     */
    collectClick(item) {
      workWorkCollectAPI(item.workId)
          .then(res => {
            // item.collect = item.collect == 0 ? 1 : 0
            this.getList()
          })
          .catch(() => {
          })
    },


    /**
     * 拖拽
     */
    moveItem(evt) {
      if (evt) {
        // 如果没有进行移动 不做处理
        if (evt.oldIndex == evt.newIndex) {
          return
        }

        workUpdateWorkOrderAPI(this.tabList[0].list.map(item => item.workId))
            .then(res => {
            })
            .catch(() => {
            })
      }
    },

    /**
     * 进入详情
     */
    enterDetail(item) {
      this.$router.push({
        name: 'project-list',
        params: {
          id: item.workId
        }
      })
    },

    /**
     * 创建项目
     */
    createProjectClick() {
      this.editId = null
      this.isCreate = true
    },

    /**
     * 编辑项目
     */
    editProjectClick(item) {
      this.editId = item.workId
      this.isCreate = true
    },

    /**
     * 创建成功
     */
    createSuccess() {
      this.getList()
    },

    /**
     * 展示类型修改
     */
    showTypeChange(type) {
      this.$router.push(`/project/list?type=${type}`)
    },

    /**
     * 行操作
     */
    cellHandle(type, data) {
      if (type === 'edit') {
        this.editProjectClick(data)
      } else if (type === 'delete') {
        this.deleteProject(data)
      } else {
        this.collectClick(data)
      }
    },

    /**
     * 删除项目
     */
    deleteProject(data) {
      this.$confirm(
          '确定要删除项目吗？删除后此项目中的所有任务将一并彻底删除，无法恢复',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      )
          .then(() => {
            workWorkDeleteAPI(data.workId)
                .then(res => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.getList()
                })
                .catch(() => {
                })
          })
          .catch(() => {
          })
    }
  }
}
</script>

<style lang="scss" scoped>
.corver {
  height: 100%;
  overflow: hidden;
  position: relative;

  .content {
    background-color: white;
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 3px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;
    padding: 10px 12px 15px;

    .dropdown-handle {
      cursor: pointer;
      position: absolute;
      right: 30px;
      top: 20px;
      z-index: 2;
    }

    .el-dropdown-filter {
      cursor: pointer;
      border-radius: 4px;
      padding: 8px 10px;
      background-color: white;
      margin-left: 15px;
    }
  }
}

.el-dropdown-menu {
  .el-dropdown-title {
    padding: 0px 20px 10px;
    color: #999;
    border-bottom: 1px solid $xr-border-color-base;
  }

  .el-dropdown-menu__item {
    color: #333;
  }
}

.xr-header {
  padding-top: 0 !important;
}

:deep( .el-tabs) {
  height: 100%;

  .el-tabs__header {
    margin: 0 8px 15px;
  }

  .el-tabs__nav-wrap::after {
    display: none;
  }

  .el-tabs__content {
    height: calc(100% - 45px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}

.cover-content {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  flex-direction: row;
  padding-top: 8px;

  &-item {
    position: relative;
    flex: none;
    width: 235px;
    height: 0;
    padding: 8px;
    transform: translateY(0);
    margin-bottom: 20px;


    &__content {
      position: absolute;
      top: 0;
      left: 8px;
      right: 8px;
      bottom: 0;
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);
      transition: box-shadow 0.218s ease;
      cursor: pointer;
      border-radius: $xr-border-radius-base;

      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;

      .handle-bar {
        text-align: right;
        margin: 10px;
        z-index: 1222222222;
        position: relative;

        .title {
          text-align: left;
          color: white;
          width: calc(100% - 45px);
          display: inline-block;
          font-weight: bold;
        }

        i {
          color: white;
          cursor: pointer;

          &:hover {
            color: $xr-color-primary;
          }
        }

        .wk-focus-on.is-collect {
          color: #F7AD3D;
        }

        .wk-circle-edit {
          visibility: hidden;
        }
      }

      &-shadow {
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#59000000", endColorstr="#00000000", GradientType=0);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 4px 4px 0 0;
        z-index: 0;
      }


      &:hover {
        .wk-circle-edit {
          visibility: visible;
        }
      }
    }

    &:hover {
      transform: translateY(-4px);

      .cover-content-item__content {
        box-shadow: 0 6px 12px rgba(38, 38, 38, 0.1);
      }
    }
  }


  @media screen and (max-width: 900px) {
    .cover-content-item {
      width: 33.3%;
      padding-bottom: calc(16.65% - 16px);
    }
  }

  @media screen and (min-width: 900px) and (max-width: 1280px) {
    .cover-content-item {
      width: 25%;
      padding-bottom: calc(12.5% - 16px);
    }
  }


  @media screen and (min-width: 1280px) and (max-width: 1680px) {
    .cover-content-item {
      width: 20%;
      padding-bottom: calc(10% - 16px);
    }
  }


  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .cover-content-item {
      width: 16.6%;
      padding-bottom: calc(8.3% - 16px);
    }
  }

  @media screen and (min-width: 1921px) {
    .cover-content-item {
      width: 16.6%;
      padding-bottom: calc(8.3% - 16px);
    }
  }


  .content-cross {
    &__content {
      position: absolute;
      top: 0;
      left: 8px;
      right: 8px;
      bottom: 0;
      border: 1px #e6e6e6 solid;
      border-radius: $xr-border-radius-base;
      background: #f7f7f7;
      text-align: center;
      cursor: pointer;

      .vux-flexbox {
        height: 100%;

        .wk-l-plus {
          display: inline-block;
          font-size: 16px;
        }

        div {
          margin-top: 10px;
        }
      }


      &:hover {
        background: rgba($color: $xr-color-primary, $alpha: 0.1);
        color: $xr-color-primary;
      }
    }

    &:hover {
      transform: translateY(0);
    }
  }

  .project-cell__add {
    border: 1px #e6e6e6 solid;
    border-radius: $xr-border-radius-base;
    background: #f7f7f7;
    line-height: 75px;
    text-align: center;

    &:hover {
      background: rgba($color: $xr-color-primary, $alpha: 0.1);
      color: $xr-color-primary;
    }
  }

  .project-cell__add--title {
    color: #999;
  }
}
</style>
